<template>
  <crud
    :entity-name="entityName"
    :dialog-enity.sync="entity"
    :request-param="pagerequest"
    :keyword-placeholder="keywordPlaceholder"
    :dialog-optins="dialogOptins"
    @dialogFormClearValidate="handleFormClearValidate"
    @dialogFormValidate="handleFormValidate"
  >
    <template slot="FilterItems">
      <el-select
        v-model="activeSelected"
        size="small"
        :placeholder="L('Select')"
        clearable
        style="width: 90px"
        class="filter-item"
        @change="handleIsActiveChange"
      >
        <el-option
          :label="L('All')"
          value="All"
        />
        <el-option
          :label="L('Actived')"
          value="Actived"
        />
        <el-option
          :label="L('NoActive')"
          value="NoActive"
        />
      </el-select>
    </template>

    <template slot="TableColumns">
      <el-table-column
        prop="tenancyName"
        :label="L('TenancyName')"
      />
      <el-table-column
        prop="name"
        :label="L('Name')"
      />
      <el-table-column
        prop="description"
        :label="L('Description')"
      />
      <el-table-column :label="L('IsActive')">
        <template slot-scope="{row}">
          <el-tag :type="row.isActive | booleanTagFilter">
            {{ row.isActive ? L('Yes') : L('No') }}
          </el-tag>
        </template>
      </el-table-column>
    </template>

    <createOrEditTenant
      ref="CreateOrEditDialog"
      slot="CreateOrEditDialog"
      :entity="entity"
    />
  </crud>

</template>

<script>
import crud from '@/components/CRUD'
import createOrEditTenant from './components/CreateOrEditTenant'
export default {
  name: 'Role',
  components: { crud, createOrEditTenant },
  data() {
    return {
      entity: {},
      entityName: 'tenant',
      pagerequest: { isActive: null },
      keywordPlaceholder: this.L('TenancyName') + '/' + this.L('Name'),
      dialogOptins: {
        width: '500px',
        createEnityParam: { permissions: [] },
        createTitle: this.L('CreateNewTenant'),
        editTitle: this.L('EditTenant'),
        deleteConfirm: this.L('DeleteTenantConfirm')
      },
      activeSelected: null
    }
  },
  methods: {
    handleIsActiveChange(val) {
      if (val === 'Actived') {
        this.pagerequest.isActive = true
      } else if (val === 'NoActive') {
        this.pagerequest.isActive = false
      } else {
        this.pagerequest.isActive = null
      }
    },
    handleFormClearValidate() {
      this.$refs.CreateOrEditDialog.clearValidate()
    },
    handleFormValidate(cb) {
      this.$refs.CreateOrEditDialog.validate(cb)
    }
  }

}
</script>
